<template>
  <view>
    <zh-cascader
      v-model:modelStr="_strvalue"
      v-model="_value"
      :fieldNames="props.fieldNames"
      @change="changData"
      :default-value="_def"
      :color="props.color"
      :active-color="props.activeColor"
      :height="props.height"
      :slotTabHeigth="88"
      :data="cityAlldata"
    ></zh-cascader>
  </view>
</template>
<script lang="ts" setup>
/**
 * 地区级联选择器
 */
import { ref, isProxy } from 'vue';
import { provinceData } from '@/tool/static/province';
import { cityData } from '@/tool/static/city';
import { areaData } from '@/tool/static/area';
const emits = defineEmits(['update:modelValue', 'update:modelStr','change']);
const props = defineProps({
  //转义的字段
  fieldNames: {
		type: Object,
		default: () => {
			return { label: 'title', value: 'key', children: 'children' };
		},
	},
  /**
   * 城市选择的级别
   * province:省级别。
   * city:省，市
   * area:省，市，县/区.
   */
  cityLevel: {
    type: String,
    default: 'area',
  },
  /**
   * 热门城市选择。
   */
  //hotCity: {
  //	type: Array,
  //	default: () => [
  //		{ name: '金华市', data: ['浙江省', '金华市', '婺城区'] },
  //		{ name: '杭州市', data: ['浙江省', '杭州市', '西湖区'] },
  //	],
  //},
  /**
   * 默认选中的数据
   */
  defaultValue: {
    type: [String, Number, Array],
    default: () => [],
  },
  /**
   * 双向绑定输入数据
   */
  modelValue: {
    type: [String, Number, Array],
    default: () => [],
  },
  modelStr: {
    type: String,
    default: '',
  },
  height: {
    type: Number,
    default: 800,
  },
  //激活状态下的颜色。
  activeColor: {
    type: String,
    default: 'primary',
  },
  // 背景主题
  color: {
    type: String,
    default: 'white',
  },
});
const cityAlldata = ref(chiliFormatCity_area());
let _value = ref(props.modelValue);
console.log(props.modelValue);
let _strvalue = ref(props.modelStr);
let _def = isProxy(props.defaultValue) ? props.defaultValue : ref(props.defaultValue);
function changData(value:any,label:any) {
  emits('update:modelValue', value);
  emits('update:modelStr', label);
  emits('change', {
    ids: value,
    str: label
  });
}
watch(
  () => props.modelValue,
  () => {
    if (props.modelValue) {
      _value.value = props.modelValue;
    } else {
      _value.value = [];
    }
  },
  { deep: true }
);
//格式化数据格式。
function chiliFormatCity_area() {
  let list: Array<any> = [];
  provinceData.forEach((item: any, index: number) => {
    list.push({
      key: String(item.value),
      title: String(item.label),
      children: [],
    });
  });
  if (props.cityLevel == 'province') return list;
  cityData.forEach((item: any, index: number) => {
    item.forEach((citem: any, cindex: number) => {
      list[index].children.push({
        key: citem.value,
        title: citem.label,
        children: [],
      });
    });
  });
  if (props.cityLevel == 'city') return list;
  list.forEach((item, index) => {
    item.children.forEach((citem, cindex: number) => {
      areaData[index][cindex].forEach((jitem) => {
        list[index].children[cindex].children.push({
          key: jitem.value,
          title: jitem.label,
        });
      });
    });
  });
  return list;
}
</script>
